{extend name="common/layout" /}
{block name="main"}
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>{:lang('Network Line')}</legend>
    </fieldset>
    <blockquote class="layui-elem-quote">
    <div class="demoTable">
        <div class="layui-inline">
            <input class="layui-input" style="width: 250px;"  name="key" id="key" placeholder="{:lang('Please Enter Username / Line Name')}">
        </div>
        <button class="layui-btn layui-btn-normal" id="search" data-type="reload">{:lang('Search')}</button>
        <div class="layui-btn-group demoTable">
<!--           <a class="layui-btn" href="{:U('create')}" >线路开通申请</a>
 -->          <!-- <button class="layui-btn" data-type="getCheckLength">线路删除申请</button>
          <button class="layui-btn" data-type="isAll">线路重新开通申请</button>
          <button class="layui-btn" data-type="isAll">线路带宽调整申请</button> -->
          <a class="layui-btn layui-btn-warm" id="downReport" href="{$repotUrl}" data-title="{:lang('Export Line')}" target="_blank">{:lang('Export')}</a>
        </div>
        <div style="clear: both;"></div>
    </div>
        
    </blockquote>
    <table class="layui-table" id="list" lay-filter="list"></table>
</div>
{/block}
{block name="footer"}
<script type="text/javascript" id="report-html">
    <form class="layui-form" method="post" id="_field-form" action="" target="_blank">
        <div class="layui-form-item" style="position: relative;">
            <label class="layui-form-label" style="width:80px;">{:lang('Export Field')}</label>
            <div class="layui-input-block field-s" style="margin-left:110px;height:30px;overflow: hidden;width360px;">
             <?php $i=0;?>
             <?php foreach($fiels as $field=>$val):?>
              <input type="checkbox" name="fields[]" {$i<6 ? 'checked': ''} value="{$field}" lay-skin="primary" title="{$val}">
              <?php $i++;?>
              <?php endforeach;?>

            </div>
<span id="more-click" title="{:lang('More')}"><i class="icon icon-circle-down"></i></span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:80px;">{:lang('Export File')}</label>
            <div class="layui-input-block" style="margin-left:110px;">
             <input name="ext" value="xlsx" title="xlsx" checked="" type="radio">
             <input name="ext" value="xls" title="xls" type="radio">
             <input name="ext" value="csv" title="csv" type="radio">
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="localcloud">
    {{# if(d.type==3){ }}
      {{d.cloudlabel}}
    {{# }else{ }}
        {{d.typelabel}}
    {{# } }}
</script>
 <script type="text/javascript" id="line-name">
    <a href="{:url('view')}?network_id={{d.id}}">{{d.name}}</a>
 </script>
<script type="text/javascript" id="_Mbps">
    {{d.broadband}} (Mbs)
    {{# if(d.status==8 && d.broadband < d.mbs){ }}
        <i class="icon icon-move-up" style="color: #07ac68;font-size: 18px;"></i> {{d.mbs}} (Mbs)
    {{# } }}
    {{# if(d.status==8 && d.broadband > d.mbs){ }}
       <i class="icon icon-move-down" style="color: #07ac68;font-size: 18px;"></i> {{d.mbs}} (Mbs)
    {{# } }}
</script>    
<script type="text/html" id="action">
    
    <a href="{:url('view')}?network_id={{d.id}}" class="layui-btn layui-btn-xs">{:lang('Details')}</a>
    {{# if(d.status==12){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="dustbin">{:lang('Delete')}</a>
    {{# }else{ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled" disabled>{:lang('Delete')}</a>
    {{# } }}
</script>
   <script type="text/javascript">

   	layui.use('table', function() {
   		 var table = layui.table, $ = layui.jquery,form = layui.form;
   		 var tableIn = table.render({
            elem: '#list'
            ,url: '{:url("index")}',
            method:'post',
            page:getPageThume()
            ,cols: [[
                // {field:'item', title: "{:lang('No.')}", width:"60"},
                {field:'email', title: "{:lang('User Mailbox')}", width:"150",sort:true},
                {field:'name', title: "{:lang('Line Name')}", width:"200",sort:true,templet: '#line-name',},
                {field: 'locallabel', title: '{:lang("Local Access")}', width:"150"},
                
                {field: 'endclou', align: 'center', title: '{:lang("Peer Connection")}', width: "150"},
                
                {field: 'broadband', align: 'center', title: '{:lang("Bandwidth")}', width: "100",templet: '#_Mbps' },
                {field: 'statuslabel', align: 'center', title: '{:lang("Status")}', width: "120" ,sort:true},
                {field: 'approtime', align: 'center', title: '{:lang("Opening Date")}', width: "150" ,sort:true},
                {field: 'enddate', align: 'center', title: '{:lang("Expire Date")}', width: "150" ,sort:true},
                {field: 'total', align: 'center', title: '{:lang("Monthly rental fee")}', width: "150" ,sort:true},
                {field:'create_time', title: "{:lang('Application Time')}", width:"150",sort:true}
                ,{width:"10%",title: "{:lang('Operating')}", align:'right', toolbar: '#action'}
            ]]
        });
        table.on('tool(list)', function(obj){
            var data = obj.data;
            if(obj.event === 'dustbin'){  //申请删除线路
                var confirm = layer.confirm('{:lang("Are you sure you want to delete it")}', function(index){
                    loading =layer.load(1, {shade: [0.1,'#fff']});
                    layer.close(confirm);
                    $.post('{:url("dustbin")}',{id:data.id},function (res) {
                        layer.close(loading);
                        if (res.code==1) {
                            obj.del();
                        }else{
                            layer.msg(res.msg,{time:1000,icon:2});
                            return false;
                        }
                    })
                })           
            }
        })
         //搜索
        $('#search').on('click', function () {
            var key = $('#key').val();
            tableIn.reload({
                where: {key: key},
                done: function(res, curr, count){
                    console.log(res);
                    $("#downReport").attr("href",res.repotUrl);
                    
                }
            });
        });
        /*点击*/
        /*点击*/
        $("#downReport").click(function(){
            var _this = $(this);
            
            layer.open({
                type: 1 //此处以iframe举例
                ,title: _this.data('title')
                ,area: ['730px', '300px']
                ,shade: 0.8
                ,content: $("#report-html").html()
                ,zIndex: layer.zIndex //重点1
                ,btn:['确定']
                ,yes:function(){
                    $("#_field-form").attr('action',_this.attr('href'))
                    $("#_field-form").submit();
                    // var loading = layer.load(1, {shade: [0.1, '#fff']});
                    // $.post(_this.attr('href'),$("#_field-form").serialize(),function(res){
                    //     layer.close(loading);
                    // })
                }
            })
            $("#more-click").click(function(){
                if($(this).hasClass('open')){
                    $(this).removeClass('open')
                    $(this).find('i').removeClass('icon-circle-up')
                    $(this).find('i').addClass('icon-circle-down')
                    $(".field-s").animate({height:'30px'});
                }else{
                    $(this).addClass('open')
                    $(this).find('i').addClass('icon-circle-up')
                    $(this).find('i').removeClass('icon-circle-down')
                    $(".field-s").animate({height:'120px'});
                }
              
            });
            form.render();
            return false;
        })
         $('body').on('blur','.list_order',function() {
            var id = $(this).attr('data-id');
            var sort = $(this).val();
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post('{:url("sort")}',{id:id,sort:sort},function(res){
                layer.close(loading);
                if(res.code === 1){
                    layer.msg(res.msg, {time: 1000, icon: 1});
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                }
            })
        });
   	})
    
   </script>
{/block}